<template>
  <div class="ordinaryView">
    <el-row :gutter="20">
      <el-col :span='8'>
        <el-card>
          <el-form ref="form" :model="form" :rules="rules" label-width="90px">
            <el-form-item label="单号" required>
              <el-input placeholder="请输入运单号或订单号"
                v-model.trim="form.code"
                @keyup.enter.native="getOrderInfo"
              />
            </el-form-item>
            <el-form-item label="订单号">
              <span>{{ searchResult.code }}</span>
            </el-form-item>
            <el-form-item label="波次号">
              <span>{{ searchResult.wavePickingCode }}</span>
            </el-form-item>
            <el-form-item label="拣货顺序" >
              <span>{{ searchResult.orderNum }}</span>
            </el-form-item>
            <el-form-item label="类型">
              <span>{{ searchResult.orderTag }}</span>
            </el-form-item>
            <el-form-item label="入驻商" >
              <span>{{ searchResult.shipmentName }}</span>
            </el-form-item>
            <el-form-item label="承运商">
              <span>{{ searchResult.carrierName }}</span>
            </el-form-item>
            <el-form-item label="包裹数">
              <span>{{ searchResult.packageNum }}</span>
            </el-form-item>
            <el-form-item label="拆分运单号">
              <span class="splitWaybillCode">{{ searchResult.splitWaybillCode }}</span>
            </el-form-item>
            <el-form-item label="拆分包裹数">
              <el-input
                v-model.trim="form.num"
                placeholder="请输入大于0的正整数"
                onkeyup="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}"
                onafterpaste="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}"
              />
              <!-- <el-input v-model.trim="form.num" controls-position="right" id='refReunite' @keyup.enter.native='reunite'/> -->
            </el-form-item>
          </el-form>
          <el-button class="unpack-btn" :disabled=" !form.code ||  !form.num || !searchResult.code" @click="unpack">拆分</el-button>
          <el-button :disabled="!searchResult.splitWaybillCode" @click="print">打印</el-button>
        </el-card>
      </el-col>
      <el-col :span='16'>
        <el-card class="box-card-right">
          <goodsList :list="searchResult.items" />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getOrderdetail, splitOrder, printSplitExpress } from '@/api/outStorage/orderUnpack'
import soonPrint from '@/components/Printing/printBefore.js'
import goodsList from './components/goodsList.vue'
export default {
  name: "orderUnpack",
  components:{ goodsList },
  data(){
    return {
      form: {
        code: '',
        num: ''
      },
      searchResult: {},
      rules:{
        code:[
          { required: true, message: '请输入波次号/容器号', trigger: 'blur' }
        ],
        num: [{required: false, message: '请输入拆分包裹数',type:'number'}],
      },
      state: {
        form: {}
      }
    }
  },
  methods: {
    getOrderInfo() {
      getOrderdetail(this.form.code).then(res => {
        // FH202201070000006
        this.searchResult = res.data
      })
    },
    // 拆分
    unpack() {
      splitOrder(this.searchResult.code, { splitPackageNum:  this.form.num}).then(res => {
        this.$set(this.form, 'num', '')
        this.getOrderInfo()
        this.$message.success(res.msg)
        // Object.assign(this.$data, this.$options.data.call(this))
      })
    },
    // 打印
    print() {
      printSplitExpress({ deliveryCode:this.searchResult.code }).then(res => {
        localStorage.setItem('printData', JSON.stringify(res.data))
        const routeUrl = this.$router.resolve({ path: '/printResult' })
        soonPrint(routeUrl.href)
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.ordinaryView{
  padding: 30px;
}
.detail{
  word-wrap: break-word;
}
.splitWaybillCode {
  word-break: break-all
}
</style>
